<template>
  <el-row :gutter="20">
    <el-col :sm="24" :md="18">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-row :gutter="20">
          <el-col :sm="24" :md="12">
            <el-form-item label="用户名:">
              <div :title="ruleForm.username">{{ ruleForm.username }}</div>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12">
            <el-form-item label="账户类型:">
              <div :title="ruleForm.username">{{ ruleForm.type|type }}</div>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12">
            <el-form-item label="积分:">
              <div  >{{ ruleForm.score }}</div>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12">
            <el-form-item label="状态:">
              <div  >{{ ruleForm.status |status}}</div>
            </el-form-item>
          </el-col>
          <el-col :sm="24" :md="12">
            <el-form-item label="vip到期时间:">
              <div  >{{ ruleForm.vipEndTime |dateFormat}}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="手机" prop="mobile">
          <el-input v-model="ruleForm.mobile"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="mail">
          <el-input v-model="ruleForm.mail"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password" type="password"></el-input>
        </el-form-item>
        <el-form-item label="重复密码" prop="repwd">
          <el-input v-model="ruleForm.repwd" type="password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >保存</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>
<script>
import { fieldMap, publicFilter } from "@/utils/showMap";
import { setUser, getUser, removeUser } from "@/utils/auth";
import { MessageBox, Message } from "element-ui";
import store from "@/store";
import { userInfo, getUserInfo } from "@/api/service";
export default {
   filters: {
    status: value=>publicFilter(fieldMap.user_status,value),
    type: value=>publicFilter(fieldMap.user_type,value),
    dateFormat: (args, fmt="YYYY-mm-dd HH:MM:SS") => {
        //let fmt="YYYY-mm-dd"
        let ret;
        if (args) {
          let date = new Date(args)
          const opt = {
            "Y+": date.getFullYear().toString(), // 年
            "m+": (date.getMonth() + 1).toString(), // 月
            "d+": date.getDate().toString(), // 日
            "H+": date.getHours().toString(), // 时
            "M+": date.getMinutes().toString(), // 分
            "S+": date.getSeconds().toString() // 秒
          };
          for (let k in opt) {
            ret = new RegExp("(" + k + ")").exec(fmt);
            if (ret) {
              fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
            };
          };
          return fmt;
        } else {
          return "";
        }
      }
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (this.ruleForm.repwd !== "") {
        this.$refs.ruleForm.validateField("repwd");
      }
      callback();
    };
    var validatePass2 = (rule, value, callback) => {
      if (value !== this.ruleForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      typeOption: fieldMap.user_type,
      ruleForm: {
        id: "",
        username: "",
        status: "1",
        type: "1",
        mail: "",
        mobile: "",
        score: "",
        vipEndTime: "",
        password: "",
        repwd: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        mail: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
        mobile: [{ required: true, message: "请输入电话", trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }],
        repwd: [
          {
            validator: validatePass2,
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
    //加载
    let obj = getUser() ? JSON.parse(getUser()) : {};
    if (obj.hasOwnProperty("username")) this.search("me");
  },
  methods: {
    search(args) {
      getUserInfo(args).then((res) => {
        for (let key in res.data) {
          if (this.ruleForm.hasOwnProperty(key))
            this.ruleForm[key] =
              res.data[key] !== null ? String(res.data[key]) : "";
        }
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          userInfo(
            {
              mail: this.ruleForm.mail,
              mobile: this.ruleForm.mobile,
              password: this.ruleForm.password,
            },
            "me"
          ).then((res) => {
            Message({
              message: res.msg || "修改成功",
              type: "success",
              duration: 3 * 1000,
            });
            // this.$router.push("/manage/userList");
          });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style lang="less" scoped>
.demo-ruleForm {
  text-align: left;
}
</style>
